<style lang="scss" scoped>
.el-input{
  width: 250px;
}
.flex_personal{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;

  .close_icon{
    position: absolute;
    right: 0;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 22px;
    color: #FE4E00;
  }
}
:deep(.el-form-item){
  margin-right: 20px;
}

.modal_content {
  max-height: 300px;
  overflow-y: auto; /* Add this line to enable vertical scrollbar */
}
</style>

<template>
  <el-dialog v-model="visible" :title="dialogTitle" :width="850" @close="handleClose">
    <div class="modal_content">
      <el-form :model="handleForm" inline ref="formRef" label-width="100" :rules="rules">
            <el-form-item label="物流公司：" prop="companyName">
              <el-input clearable v-model="handleForm.companyName"  placeholder="请输入物流公司"></el-input>
            </el-form-item>
            <el-form-item  label="使用状态：" prop="status">
              <el-switch v-model="handleForm.status" active-value="启用" inactive-value="禁用" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"></el-switch>
            </el-form-item>
            <div class="flex_personal" v-for="(item, index) in handleForm.newConnectInfoDtoList" :key="index">
              <el-form-item label="联系人：" :prop="'newConnectInfoDtoList.' + index + '.name'" :rules="rules.procureCategoryName">
                <el-input style="width: 150px" clearable v-model="item.name" placeholder="请输入联系人"></el-input>
              </el-form-item>
              <el-form-item label="联系电话：" :prop="'newConnectInfoDtoList.' + index + '.phone'" :rules="rules.procureCategoryPhone">
                <el-input style="width: 150px" clearable v-model="item.phone" placeholder="请输入联系电话" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item label="登陆密码：" :prop="'newConnectInfoDtoList.' + index + '.password'" :rules="rules.procureCategoryPassword">
                <el-input style="width: 150px" clearable v-model="item.password" placeholder="请输入登录密码"></el-input>
              </el-form-item>
              <el-icon class="close_icon" v-if="index != 0" @click="delPersonal(index)"><CircleCloseFilled /></el-icon>
            </div>
          <el-button type="primary" @click="addPersonal" plain style="width: 100%">新增联系人</el-button>
      </el-form>
    </div>
    <template #footer>
      <div class="modal-btn-list">
        <div></div>
        <div>
          <el-button @click="handleClose">取消</el-button>
          <!--s-->
          <el-button :loading="loading" type="primary" @click="submitForm(formRef)">确认</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, defineEmits, getCurrentInstance } from "vue";
import {companyAddCompany,postDeliverUpdateCompany,postCompanyDeleteContact} from "@/api/logisticsCompany.js"

const emit = defineEmits(["ok"]);
const { proxy } = getCurrentInstance();

let handleForm = reactive({
  companyId:"",
  companyName: "",
  newConnectInfoDtoList: [],
  status: "启用",
});
const rules = reactive({
  companyName: [{ required: true, message: "请输入物流公司", trigger: "blur" }],
  status: [{ required: true, message: "请选择使用状态", trigger: "change" }],
  procureCategoryName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  procureCategoryPhone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  procureCategoryPassword: [{ required: true, message: "请输入登录密码", trigger: "blur" }],

});
const id = ref();
const formRef = ref();
const visible = ref(false);
const loading = ref(false);
const detailType = ref("");
// 控制是否禁用
const isDisabled = ref(false);
const message = inject('message');

//新增联系人
const addPersonal = async() => {
  let obj = {}
  handleForm.newConnectInfoDtoList.push(obj)
}
//删除联系人
const delPersonal = async(index) => {
  try {
    const deletedId = handleForm.newConnectInfoDtoList[index].id;
    if(deletedId){
      await message.confirmMsg('是否删除该条数据？')
      await postCompanyDeleteContact({id: deletedId})
      handleForm.newConnectInfoDtoList.splice(index, 1)
    }
    else {
      handleForm.newConnectInfoDtoList.splice(index, 1)
    }
  } catch (error) {
    console.log(error)
  }
}

let dialogTitle = ref("");
// 打开
const getParent = (type, item) => {
  detailType.value = type.userState;
  handleForm.companyId = type.id;
  isDisabled.value = false;
  visible.value = true;
  // 根据操作是“添加”还是“编辑”设置对话框标题
  if (detailType.value === "edit") {
    console.log(type)
    dialogTitle.value = "编辑物流公司";
    const res = type.res
    handleForm.companyName = res.data.companyName;
    const showStatus = res.data.status === "1"? "启用" : "禁用";
    handleForm.status = showStatus;
    for (let i = 0; i < res.data.companyUserDtos.length; i++) {
      // id.value = res.data[0].companyUserDtos[i].id;
      let obj = {}
      obj.id = res.data.companyUserDtos[i].id;
      obj.name = res.data.companyUserDtos[i].name;
      obj.phone = res.data.companyUserDtos[i].phone;
      obj.password = res.data.companyUserDtos[i].password;
      handleForm.newConnectInfoDtoList.push(obj)
    }
  }
  else {
    console.log(type)
    dialogTitle.value = "新增物流公司";
    handleForm.companyName = "";
    // handleForm.status = 0;
    handleForm.newConnectInfoDtoList = [];
  }
};

// 关闭
const handleClose = () => {
  formRef.value.resetFields();
  handleForm.newConnectInfoDtoList = [];
  visible.value = false;
  // location.reload();
};


// 提交
const submitForm = async (form) => {
  try {
    await form.validate();
    handleForm.status = handleForm.status === "启用"? 1 : 0;
    if (dialogTitle.value === "新增物流公司" && handleForm.newConnectInfoDtoList.length === 0) {
      message.notify('warning','请添加联系人');
      return;
    }
    if(!handleForm.companyId){
      await companyAddCompany(handleForm);
      handleClose();
    }else {
      await postDeliverUpdateCompany(handleForm);
      handleClose();
    }
    emit("ok");
    console.log('表单验证通过，接口调用成功');
  } catch (error) {
    console.error('表单验证失败或接口调用失败', error);
  }
};

defineExpose({
  getParent,
});
</script>
